"use client"

import { Dialog } from "@radix-ui/react-dialog"
import { MoreHorizontal } from "lucide-react"
import * as React from "react"

import { toast } from "~/registry/miami/hooks/use-toast"
import {
   AlertDialog,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
} from "~/registry/miami/ui/alert-dialog"
import { Button } from "~/registry/miami/ui/button"
import {
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
} from "~/registry/miami/ui/dialog"
import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
} from "~/registry/miami/ui/dropdown-menu"
import { Label } from "~/registry/miami/ui/label"
import { Switch } from "~/registry/miami/ui/switch"

export function PresetActions() {
   const [open, setIsOpen] = React.useState(false)
   const [showDeleteDialog, setShowDeleteDialog] = React.useState(false)

   return (
      <>
         <DropdownMenu>
            <DropdownMenuTrigger asChild>
               <Button variant="secondary" size="icon">
                  <span className="sr-only">Actions</span>
                  <MoreHorizontal />
               </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
               <DropdownMenuItem onSelect={() => setIsOpen(true)}>
                  Content filter preferences
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem
                  onSelect={() => setShowDeleteDialog(true)}
                  className="text-red-600"
               >
                  Delete preset
               </DropdownMenuItem>
            </DropdownMenuContent>
         </DropdownMenu>
         <Dialog open={open} onOpenChange={setIsOpen}>
            <DialogContent>
               <DialogHeader>
                  <DialogTitle>Content filter preferences</DialogTitle>
                  <DialogDescription>
                     The content filter flags text that may violate our content
                     policy. It&apos;s powered by our moderation endpoint which
                     is free to use to moderate your OpenAI API traffic. Learn
                     more.
                  </DialogDescription>
               </DialogHeader>
               <div className="py-6">
                  <h4 className="text-sm text-muted-foreground">
                     Playground Warnings
                  </h4>
                  <div className="flex items-start justify-between space-x-4 pt-3">
                     <Switch name="show" id="show" defaultChecked={true} />
                     <Label className="grid gap-1 font-normal" htmlFor="show">
                        <span className="font-semibold">
                           Show a warning when content is flagged
                        </span>
                        <span className="text-sm text-muted-foreground">
                           A warning will be shown when sexual, hateful, violent
                           or self-harm content is detected.
                        </span>
                     </Label>
                  </div>
               </div>
               <DialogFooter>
                  <Button variant="secondary" onClick={() => setIsOpen(false)}>
                     Close
                  </Button>
               </DialogFooter>
            </DialogContent>
         </Dialog>
         <AlertDialog
            open={showDeleteDialog}
            onOpenChange={setShowDeleteDialog}
         >
            <AlertDialogContent>
               <AlertDialogHeader>
                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                  <AlertDialogDescription>
                     This action cannot be undone. This preset will no longer be
                     accessible by you or others you&apos;ve shared it with.
                  </AlertDialogDescription>
               </AlertDialogHeader>
               <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <Button
                     variant="destructive"
                     onClick={() => {
                        setShowDeleteDialog(false)
                        toast({
                           description: "This preset has been deleted.",
                        })
                     }}
                  >
                     Delete
                  </Button>
               </AlertDialogFooter>
            </AlertDialogContent>
         </AlertDialog>
      </>
   )
}
